<template>
  <div>
    <TitleSecondary title="操作日志" :icon="icon" @change="handleChangeIcon" />
    <div v-show="icon === 'up'" class="log-container">
      <div class="time-container">
        <div v-for="(item, i) in list" :key="i" class="time-item">
          <p style="margin: 0">{{ item.updateTime.trim().split(' ')[0] }}</p>
          <p style="margin: 0">{{ item.updateTime.trim().split(' ')[1] }}</p>
        </div>
      </div>
      <p-steps :current="1" direction="vertical" progress-dot>
        <p-step
          v-for="(item, i) in list"
          :key="i"
          :title="item.createUserName + ':' + item.remark"
          status="finish"
        />
      </p-steps>
    </div>
  </div>
</template>

<script>
// import { getOperationLog } from '@/api/forecast';

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    // planId: {
    //   type: Number,
    //   default: undefined,
    // },
    // pageType: {
    //   type: String,
    //   default: undefined,
    // },
  },
  data() {
    return {
      // operationLog: [], //操作日志请求返回的信息
      icon: 'down', //icon图片up、down的切换
    };
  },
  methods: {
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
      // if (this.operationLog.length === 0) {
      //   const res = await getOperationLog(this.pageType, this.planId);
      //   this.operationLog = res?.data?.data || [];
      // }
    },
  },
};
</script>
<style lang="less" scoped>
.log-container {
  width: 100%;
  display: flex;
}
.time-container {
  width: 130px;
  .time-item {
    color: #1740dc;
    text-align: center;
    height: 90px;
    box-sizing: border-box;
  }
}
/deep/ .poros-steps-dot .poros-steps-item-content,
.poros-steps-dot.poros-steps-small .poros-steps-item-content {
  width: 95%;
}
/deep/ .poros-steps-vertical .poros-steps-item-content {
  min-height: 90px;
}
</style>
